﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DevFx.Web.Pages.tableStype.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <script src="../../Contents/scripts/jquery/jquery-1.6.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
                        $("#MenuTb").find('a[target="mainFrame"]').click(function () {
                            $("#iframeFather").show();

                        });
                        $("#mainFrame").bind({
                            "readystatechange": function () {
                                if (this.readyState == 'complete') {
                                    $("#iframeFather").hide();
                                }
                            }
                        });
           
        });
    </script>
    <title>asdfsd</title>
</head>
<body>
    1231231232
   
   <div id="iframeFather" style="z-index: 949; position:absolute;filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;
 width: 100%; height: 100%; top: 0px; left: 0px; display:none;background-color:White;
" ><img  src="../../Contents/images/loading.gif"  style="margin:0px;" />
    </div>
    将这个层放到有Iframe的页面上。
    <iframe id="mainFrame" name="mainFrame" src="" scrolling="no" frameborder="0"
        framespacing="0" style="width: 100%; margin: 0px 0px 0px 0px; padding-left: 2px;">
    </iframe>
    其中：frameborder="0" framespacing="0" 使iframe没有凹下去的感觉。 超链接的写法为
   <div id="MenuTb">
<a target="mainFrame" href="WebForm2.aspx">显示百度</a>
</div>

    用jquery写的方法来实现点击是显示遮罩层，iframe加载完毕后遮罩层隐藏：
</body>
</html>
